<template>
  <div class="app-container">
    <div class="chart-container">
      <!-- 预习参与度分析 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>预习参与度分析</span>
        </div>
        <div id="participation-analysis" style="width: 100%; height: 400px;"></div>
      </el-card>

      <!-- 预习方式分布 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>预习方式分布</span>
        </div>
        <div id="method-distribution" style="width: 100%; height: 400px;"></div>
      </el-card>

      <!-- 预习效果与测试成绩对比 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>预习效果与测试成绩对比</span>
        </div>
        <div id="performance-comparison" style="width: 100%; height: 400px;"></div>
      </el-card>

      <!-- 预习时长与成绩关系 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>预习时长与成绩关系</span>
        </div>
        <div id="time-score-relation" style="width: 100%; height: 400px;"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
// import learningProcessData from '@/mock/learning-process'
// import shuxueData from '../class-overview/shuxue'

export default {
  name: 'PreviewAnalysis',
  data() {
    return {
      // 预习参与度数据
      participationData: [
        { value: 120, name: '经常预习' },
        { value: 60, name: '偶尔预习' },
        { value: 20, name: '从不预习' }
      ],
      // 预习方式数据
      previewMethods: [
        '教材预习',
        '辅导资料',
        '在线视频',
        '学习APP',
        '其他方式'
      ],
      // 预习方式组合
      methodCombinations: [
        '仅教材预习',
        '仅在线资源',
        '教材+在线视频',
        '教材+辅导资料',
        '多种方式组合'
      ],
      // 课堂表现指标
      performanceIndicators: [
        '课堂参与度',
        '问题回答准确率',
        '知识掌握程度',
        '作业完成质量',
        '测试成绩'
      ]
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      this.drawParticipationAnalysis()
      this.drawMethodDistribution()
      this.drawPerformanceComparison()
      this.drawTimeScoreRelation()
    },
    // 绘制预习参与度分析图
    drawParticipationAnalysis() {
      const chart = echarts.init(document.getElementById('participation-analysis'))
      const option = {
        title: {
          text: '预习参与度分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['经常预习', '偶尔预习', '从不预习']
        },
        series: [
          {
            name: '预习参与度',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.participationData
          }
        ]
      }
      chart.setOption(option)
    },
    // 绘制预习方式分布图
    drawMethodDistribution() {
      const chart = echarts.init(document.getElementById('method-distribution'))
      const option = {
        title: {
          text: '预习方式分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['使用人数', '使用率', '问题回答准确率'],
          top: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.previewMethods,
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '使用人数',
            min: 0,
            max: 100,
            interval: 50
          },
          {
            type: 'value',
            name: '使用率/准确率',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: '使用人数',
            type: 'bar',
            data: [80, 50, 35, 20, 15],
            itemStyle: {
              color: function(params) {
                // 为教材预习和辅导资料设置特殊颜色
                return params.dataIndex <= 1 ? '#409EFF' : '#67C23A'
              }
            }
          },
          {
            name: '使用率',
            type: 'line',
            yAxisIndex: 1,
            data: [70, 50, 30, 20, 10],
            itemStyle: {
              color: '#F56C6C'
            }
          },
          {
            name: '问题回答准确率',
            type: 'line',
            yAxisIndex: 1,
            data: [65, 60, 85, 70, 90],
            itemStyle: {
              color: '#E6A23C'
            },
            markPoint: {
              data: [
                { type: 'max', name: '最高准确率' },
                { type: 'min', name: '最低准确率' }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均准确率' }
              ]
            }
          }
        ]
      }
      chart.setOption(option)
    },
    // 绘制预习效果与测试成绩对比图
    drawPerformanceComparison() {
      const chart = echarts.init(document.getElementById('performance-comparison'))
      const option = {
        title: {
          text: '预习效果与测试成绩对比',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['经常预习', '偶尔预习', '从不预习'],
          top: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.performanceIndicators,
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          name: '得分',
          min: 0,
          max: 100,
          interval: 20
        },
        series: [
          {
            name: '经常预习',
            type: 'bar',
            data: [85, 90, 88, 92, 95]
          },
          {
            name: '偶尔预习',
            type: 'bar',
            data: [70, 75, 72, 78, 80]
          },
          {
            name: '从不预习',
            type: 'bar',
            data: [50, 55, 52, 58, 60]
          }
        ]
      }
      chart.setOption(option)
    },
    // 绘制预习时长与成绩关系图
    drawTimeScoreRelation() {
      const chart = echarts.init(document.getElementById('time-score-relation'))
      const option = {
        title: {
          text: '预习时长与成绩关系',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          name: '预习时长(分钟)',
          data: ['0-15', '15-30', '30-45', '45-60', '60+']
        },
        yAxis: {
          type: 'value',
          name: '平均成绩'
        },
        series: [
          {
            name: '平均成绩',
            type: 'line',
            smooth: true,
            data: [65, 75, 82, 88, 92],
            markPoint: {
              data: [
                { type: 'max', name: '最高分' },
                { type: 'min', name: '最低分' }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均分' }
              ]
            }
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.chart-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

@media screen and (max-width: 1200px) {
  .chart-container {
    grid-template-columns: 1fr;
  }
}
</style>
